<template>
  <div>
    <el-drawer @close="closeFn" :visible="visible" direction="rtl">
      <el-form
        :rules="editFormFules"
        ref="editForm"
        label-width="100px"
        :model="deTailFordlist"
      >
        <el-form-item prop="name" label="名称">
          <el-input style="width: 200px" v-model="deTailFordlist.name">
          </el-input>
          <el-button type="primary" @click="saveFn">保存</el-button>
        </el-form-item>
        <el-form-item label="视频数">
          <span>{{ deTailFordlist.videoNum }}</span>
        </el-form-item>
        <el-form-item label="文件大小">
          <span></span>
        </el-form-item>
        <el-form-item label="创建日期">
          <span>{{ deTailFordlist.createdTime }}</span>
        </el-form-item>
        <el-form-item label="修改日期">
          <span>{{ deTailFordlist.updatedTime }}</span>
        </el-form-item>
        <el-form-item>
          <div>
            <el-button class="button" type="primary"
              >上传视频<i class="el-icon-upload el-icon--right"></i
            ></el-button>
            <el-button class="button" type="primary" icon="el-icon-share"
              >导出文件夹</el-button
            >
            <el-button
              class="button"
              @click="deleteFn"
              type="danger"
              icon="el-icon-delete"
              >删除文件夹</el-button
            >
          </div>

          <div></div>
          <div></div>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import {
  getFolderGetInfoApi,
  getFolderListFolderPhotoApi,
} from "@/wss/api/ContentSupervision/photoVido.js";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },

  data() {
    return {
      // 显示drawer

      deTailFordlist: {},
      // 规则
      editFormFules: {
        name: [{ required: true, message: "不可以为空哦", trigger: "blur" }],
      },
    };
  },
  methods: {
    closeFn() {
      this.$emit("update:visible", false);
    },
    // 保存
    async saveFn() {
      try {
        await this.$refs.editForm.validate();
        this.$emit("EventSave", this.deTailFordlist);
      } catch (error) {
        this.$modal.msgWarning("不可以为空哦");
      }
    },

    // 获取文件夹详细
    async getForderDetailFn(row) {
      let { data, code } = await getFolderListFolderPhotoApi({
        folderId: row.idStr,
        type: "2",
      });
      // let { data, code } = await getFolderGetInfoApi({ id: row.idStr });

      console.log({ data, row });
      if (code == 200) {
        this.deTailFordlist = JSON.parse(JSON.stringify(data[0]));
      }
    },
    // 删除
    async deleteFn() {
      try {
        await this.$modal.confirm("删除文件夹会删除文件夹下面所有附件！！！");
        // 返回删除的id
        this.$emit("EventDelete", { type: "2", id: this.deTailFordlist.idStr });
      } catch (error) {
        console.log(error);
        this.$modal.msg(error);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.button {
  width: 300px;
  margin: 10px;
}
</style>